<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ttblsjxt'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="seckillSession" method="${_method }" class="layui-form" id="form">
            <input type="hidden" name="_method" value="${_method }"/>
            <form:hidden path="id"/>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mshdmc'/></label>
                <div class="layui-input-block">
                    <form:input path="name" class="layui-input" lay-verify="required" placeholder="<fmt:message key='hdmc'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='msrq'/></label>
                <div class="layui-input-block">
                    <form:input path="seckillTime" class="layui-input" lay-verify="required" placeholder="<fmt:message key='msrq'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item feijin-validityType-gudin-area">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mssj'/></label>
                <div class="layui-input-block">
                    <form:input path="seckillBeginTime" class="layui-input" lay-verify="required" placeholder="<fmt:message key='kssj'/>" style="width: 150px;display:inline;"/> -
                    <form:input path="seckillEndTime" class="layui-input" lay-verify="required" placeholder="<fmt:message key='dqsj'/>" style="width: 150px;display:inline;"/>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='bmjzsj'/></label>
                <div class="layui-input-block">
                    <form:input path="applyDeadline" class="layui-input" lay-verify="required" placeholder="<fmt:message key='bmjzsj'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sysjlx'/></label>
                <div class="layui-input-block">
                    <input type="radio" name="merchantScopeType" lay-filter="merchantScopeType" lay-verify="required" value="1" title="<fmt:message key='qbsj'/>" <c:if test="${seckillSession.merchantScopeType eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="merchantScopeType" lay-filter="merchantScopeType" lay-verify="required" value="2" title="<fmt:message key='zdsj'/>" <c:if test="${seckillSession.merchantScopeType eq 2}">checked="checked"</c:if>/>
                </div>
            </div>


            <div class="layui-form-item" style="display:none;" id="feijin-scopeMerchant">
                <label for="" class="layui-form-label"><b style="color:red">*</b> <fmt:message key='zdsj'/></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <th><fmt:message key='sjzh'/></th>
                        <th><fmt:message key='dpmc'/></th>
                        <th><fmt:message key='cz'/></th>
                        </thead>
                        <tbody id="feijin-chooseMerchant-table">
                        <c:if test="${_method eq 'PUT'}">
                            <c:forEach items="${merchants}" var="merchant">
                                <tr id='tr${merchant.merchant.id}' data-id='${merchant.merchant.id}' class='feijin-scopeMerchant-ids'>
                                    <td>${merchant.merchant.username}</td>
                                    <td>${merchant.merchant.shopName}</td>
                                    <td><a href='javascript:void(0);' data-id='${merchant.merchant.id}' class='feijin-remove' ><fmt:message key='sc'/></a></td>
                                </tr>
                            </c:forEach>
                        </c:if>
                        <tr>
                            <td colspan="5">
                                <center><a href="javascript:void(0);" id="chooseMerchant" style="color:blue;"><fmt:message key='zdsj'/></a></center>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                </div>
            </div>


            <div class="layui-input-block">
                <div style="display: none">

                    <input type="hidden" name="merchantIdsData" id="merchantIdsData"/>

                    <input type="button" value="<fmt:message key='bc'/>" class="layui-btn" id="submit" lay-filter="submit" lay-submit>
                </div>
            </div>

        </form:form>
    </div>
</div>
<script>
    $(function () {

        if("${seckillSession.merchantScopeType}" == 2) {
            $("#feijin-scopeMerchant").show();
        }

        //选择指定商家
        $("#chooseMerchant").click(function () {
            layer.open({
                type: 2
                , title: '<fmt:message key='xzsysp'/>'
                , content: '${web_domain}/mall/seckillSession/chooseMerchants'
                , maxmin: true
                , area: ['80%', '90%']
                , btn: ['<fmt:message key='qd1'/>', '<fmt:message key='qx'/>']
                , yes: function (index, layero) {

                    var ids = [];

                    layero.find('iframe').contents().find(".feijin-check:checkbox:checked").each(function (index, item) {
                        var id = $(item).val();
                        ids.push(id);
                    });

                    $.ajax({
                        url: "${web_domain}/mall/seckillSession/queryMerchants?ids=" + ids.join("-"),
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            if (result.status) {

                                var html = "";

                                $(result.members).each(function (index, item) {
                                    html += "<tr  id='tr" + item.id + "' data-id='" + item.id + "' class='feijin-scopeMerchant-ids' >";
                                    html += "<td >" + item.username + "</td>";
                                    html += "<td >" + item.shopName + "</td>";
                                    html += "<td ><a href='javascript:void(0);' data-id='" + item.id + "' class='feijin-remove' ><fmt:message key='sc'/></a></td>";
                                    html += "</tr>";

                                });

                                $("#feijin-chooseMerchant-table").before(html);

                            }
                        }
                    });

                    layer.closeAll();

                }
            });
        });

        $(document).on("click", ".feijin-remove", function () {
            var id = $(this).attr("data-id");
            $("#tr" + id).remove();
        });


        layui.use(['form', 'laydate'], function () {

            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#seckillTime'
            });

            laydate.render({
                elem: '#seckillBeginTime',
                type:'time',
                format:'HH:mm'
            });

            laydate.render({
                elem: '#seckillEndTime',
                type:'time',
                format:'HH:mm'
            });

            laydate.render({
                elem: '#applyDeadline',
                type:'datetime',
                format:'yyyy-MM-dd HH:mm'
            });

            form.on('radio(merchantScopeType)', function (data) {
                var id = data.value;

                if (id == 1) {
                    $("#feijin-scopeMerchant").hide();
                }

                if (id == 2) {
                    $("#feijin-scopeMerchant").show();
                }

            });

            form.on('submit(submit)', function (data) {

                var scopeIds = [];
                $(".feijin-scopeMerchant-ids").each(function (index, item) {
                    var id = $(item).attr("data-id");
                    scopeIds.push(id);
                });


                $("#merchantIdsData").attr("value", scopeIds.join("-"));


                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();
                        } else {
                            layui.use('layer', function () {
                                layer.msg(result.message);
                            });
                        }
                    }
                });
            });

        });

    });
</script>
</body>
</fmt:bundle>
</html>